


$(function(){

	var ss = $('#songlist');
	var bg = $(".option img");
	var play = $("#play");
	var myaudio = $("#myaudio")[0];

	var source = localStorage.getItem('song') ? JSON.parse(localStorage.getItem('song')).source : '';
	var my_pic = localStorage.getItem('song') ? JSON.parse(localStorage.getItem('song')).pic : '';

	var para = {
		topid:'5',
		showapi_appid:'36599',
		showapi_sign:'dde227bf0cea4c6ebcadc89b99477157'
	};

	$.ajax({
		url:'http://route.showapi.com/213-4',
		type:'GET',
		dataType:'json',
		data: para,
		success:function(result){
			var data = result.showapi_res_body;
			var songlist = data.pagebean.songlist;
			//console.log(songlist[0]);
			//调用方法
			ss.append(load(songlist));
			//默认图片 为第一张 
			bg.attr('src',songlist[0].albumpic_big);
			//点击 获取当前的歌曲信息
			$("#songlist li").on('click ',function(){
				my_pic = $(this).data('pic');
				source = $(this).data('mysrc');

				play.css('animation','run 2s linear infinite');
				myaudio.src = source;
				bg.attr('src',my_pic);
				var song = {
						pic:my_pic,
						source:source
				}
				//本地存储
				localStorage.setItem('song',JSON.stringify(song));
			})
		}
	})
	
	//暂停/播放	
	play.click(function(){
		myaudio.src = source;
		bg.attr('src',my_pic);
		//localStorage.removeItem('song');
		if(myaudio.paused){
			myaudio.play();
			$(this).css('animation','run 2s linear infinite');
		}else{
			myaudio.pause();
			$(this).css('animation', 'none');
		}
	})
})

function load(arr){
	var str = '';
	for(var i = 0; i<arr.length; i++ ){

		// str+="<img src="+arr[i].albumpiic_small+"/>"
		str+="<li class='detail' data-pic='"+arr[i].albumpic_big+"' data-mysrc='"+arr[i].url+"'>"
		str+="<h3>"+arr[i].songname+"</h3>"
		str+="<p>"+arr[i].singername+"</p>"
		str+="</li>"	
	}
	return str;
}